<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库存管理</title>
    <link rel="stylesheet" href="../../../lib/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="app">
    <el-row>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">仓库管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>库存管理</el-breadcrumb-item>
        </el-breadcrumb>
    </el-row>
    <el-row>
        <el-form label-width="80px">
            <el-row gutter="20">
                <el-col span="8">
                    <el-form-item label="商品名称">
                        <el-input v-model="query.product_name"/>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="商品规格">
                        <el-input v-model="query.model"/>
                    </el-form-item>
                </el-col>

                <el-col span="8">
                    <el-form-item label="商品单位">
                        <el-input v-model="query.unit"/>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col offset="18" span="6">
                    <el-button type="success" @click="refreshData">搜索</el-button>
                </el-col>
            </el-row>
        </el-form>


    </el-row>
    <el-row>
        <el-button-group>
            <el-button type="success" @click="itemOut">出库</el-button>
            <el-button type="warning">入库</el-button>
            <el-button type="info">盘点</el-button>

        </el-button-group>
        <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%"
                :header-cell-style="
                {background:'#eee'
                ,color:'#606266'
                ,textAlign:'center'
                ,border:'1px solid'}"
        >
            <el-table-column
                    label="序号"
                    width="180"
                    align="center">
                <template slot-scope="scope">
                    {{scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="product.name"
                    label="商品名称"
                    width="180"
                    align="center">
            </el-table-column>

            <el-table-column
                    prop="product.unit"
                    label="单位"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="quantity"
                    label="数量"
                    align="center">
            </el-table-column>
        </el-table>
    </el-row>


    <el-dialog
            :visible.sync="dialogVisible"
            title="商品出库">
        <el-form label-width="120px">
            <el-form-item label="商品称">
                <el-select v-model="info.productId">
                    <el-option v-for="pro in productList"
                               :value="pro.product_id" :label="pro.product_name"/>
                </el-select>
            </el-form-item>
            <el-form-item label="出库数量">
                <el-input v-model="info.quantity"/>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
         <el-button @click="sumbitOut">确定</el-button>
   </span>
    </el-dialog>

</div>


</body>
<script src="../../../lib/vue.js"></script>
<script src="../../../lib/element-ui/lib/index.js"></script>
<script src="../../../lib/jquery.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                message: '',
                tableData: [],
                productList: [],
                info: {
                    productId: 1,
                    quantity: 0
                },
                query: {},
                dialogVisible: false
            }
        }, mounted() {
            var _this = this;
            this.refreshData();
            this.initProductList();
        }, methods: {
            initProductList() {

                var _this = this;
                $.ajax({
                    url: 'http://localhost:3000/pro/list',
                    method: 'get',
                    dataType: 'json',
                    data: _this.query,
                    success: function (data) {
                        _this.productList = data;
                    }
                })
            },
            refreshData() {
                var _this = this;
                $.ajax({
                    url: 'http://localhost:3000/stock/list',
                    method: 'get',
                    dataType: 'json',
                    data: _this.query,
                    success: function (data) {
                        _this.tableData = data;
                    }
                })
            },
            itemOut() {
                this.dialogVisible = true;
            }
            , sumbitOut() {
                var _this = this;

                $.ajax({
                    url: 'http://localhost:3000/stock/out',
                    method: 'post',
                    dataType: 'json',
                    data: {
                        product_id: _this.info.productId,
                        quantity: _this.info.quantity
                    },
                    success: function (data) {
                        _this.dialogVisible = false;
                        _this.refreshData();
                    }
                })
            }
        }
    })

</script>
</html>